import React from 'react';
import Menu from '@/components/common/menu';
import styles from '@/assets/css/index.module.css';
import { sleep } from 'antd-mobile/es/utils/sleep'

const Home = () => {
    const [keywords, SetKeywords] = React.useState('');
    const [hasMore, SethasMore] = React.useState(false)
    const [page, SetPage] = React.useState(1)
    const [CouponList, SetCouponList] = React.useState<any>([]);
    const [HotelList, SetHotelList] = React.useState<any>([]);

    React.useEffect(() => 
    {
        GetCouponData()
        GetHotelData();
    }, []);

    //下拉刷新
    const OnRefresh = async () => 
    {
        SetPage(1)
        SethasMore(true);
        SetHotelList([]);

        await sleep(1000);
        await GetHotelData();
    };

    // 上拉加载
    const LoadMore = async () => 
    {
        await sleep(1000)
        GetHotelData()
    }

    const GetHotelData = async() =>
    {
        let result = await  React.HTTP.post('/room/RoomIndex', {
            keywords: keywords,
            page: page
        })

        if(result.code == 0)
        {
            //没有更多数据
            SethasMore(false)
            return false
        }
        else
        {
            //设置分页和列表合并
            SethasMore(true)
            SetPage(page + 1)
            SetHotelList(HotelList.concat(result.data))
        }
    }

    const handleSearch = async (val:string) => 
    {
        SetKeywords(val);
        await OnRefresh();
    };

    const GetCouponData = async() =>
    {
        let result = await  React.HTTP.post('/coupon/CouponIndex')
        
        if(result.code == 1)
        {
            SetCouponList(result.data)
        }
    }

    return (
        <>
            <div className={styles.heaerd}>
                <React.UI.Swiper loop autoplay>
                    {
                        CouponList.map((item:any) =>{
                            return(
                                <React.UI.Swiper.Item key={item.id}>
                                    <React.Router.Link to={`/coupon/info?cid=${item.id}`}>
                                        <React.UI.Image src={item.thumb_text} height={213} fit='cover' />
                                    </React.Router.Link>
                                </React.UI.Swiper.Item>
                            )
                        })
                    }
                </React.UI.Swiper>
            </div>

            <div className={styles.hotel_search}>
                <React.UI.Input value={keywords} onChange={(val: string) => {handleSearch(val)}} clearable placeholder="请输入关键词搜索" />
            </div>

            <div className={styles.hotellist}>
                {/* 下拉刷新 */}
                <React.UI.PullToRefresh onRefresh={OnRefresh}>
                    {
                        HotelList.map((item: any) => {
                            return(
                                <div className={styles.item} key={item.id}>
                                    <React.Router.Link to={`/room/info?roomid=${item.id}`}>
                                        <div className={styles.images}>
                                            <div className={styles.swipers}>
                                                <img src={item.thumb_text} alt="" />
                                            </div>
                                            <div className={styles.title}>{item.name}</div>
                                        </div>
                                        <div>
                                            <div className={styles.item_top}>
                                                {
                                                    item.flag_text && item.flag_text.map((falg: string, index:number) =>{
                                                        return(
                                                            <span key={index}>{falg}</span>
                                                        )
                                                    })
                                                }
                                            </div>
                                            <div className={styles.item_bot}>
                                                <div className={styles.font}>
                                                    <span className={styles.price}>￥{item.price}/晚</span>
                                                </div>
                                            </div>
                                        </div>
                                    </React.Router.Link>
                                </div>
                            )
                        })
                    }
                    {/* 上拉加载 */}
                    <React.UI.InfiniteScroll loadMore={LoadMore} hasMore={hasMore} threshold={0} />
                </React.UI.PullToRefresh>
            </div>

            {/* 底部 */}
            <div className={styles.footer}>
                <Menu />
            </div>

        </>
    )
};

export default Home;